<template>
	<view>
		<view class="headPart ltzero" :class="[!headImgFlag ? 'linearBg' : 'transp']">
			<image class="samePar" v-if="headImgFlag" :src="getQyStaticFilePath('myTtfw.png')"></image>
		</view>
		<template v-if="hasPaddFlag">
			<view class="modWrap padd posRel" :style="{'marginTop':(navHeight + 10) + 'px','zIndex':modWrapIndex}">
				<slot/>
			</view>
		</template>
		<template v-else>
			<view class="modWrap posRel" :class="modWrapBg" :style="{marginTop:navHeight + 'px',minHeight:(windowHeight - navHeight) + 'px'}">
				<slot/>
			</view>
		</template>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		props:{
			headImgFlag:{//是否存在背景图片
				type:Boolean,
				default:false
			},
			hasPaddFlag:{//modWrap 是否含有padding值
				type:Boolean,
				default:true
			},
			modWrapBg:{//通铺无padding值时modWrap的默认颜色
				type:String,
				default:'whiteBg'
			},
			modWrapIndex:{
				type:Number,
				default:100
			}
		},
		data(){
			return{
				windowHeight:uni.getSystemInfoSync().windowHeight,
				navHeight:app.globalData.navHeight,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headPart{
		width: 100%;
		z-index: 1;
		position:absolute;
		&.linearBg{
			height: 400rpx;
			background: linear-gradient(180deg, #1677FF 0%, #1677FF 56.02%, #EFF3F6 100%);
		}
		&.transp{
			height: 640rpx;
			background:transparent;
		}
	}
	.comZIndex{
		z-index: 2;
	}
	.modWrap{
		&.whiteBg{
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			@extend .comZIndex;
		}
		&.transp{
			background: transparent;
			@extend .comZIndex;
		}
	}
</style>